<!DOCTYPE html>
<!-- saved from url=(0049)http://www.swiper.com.cn/demo/festival/index.html -->
<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<title>元宵节</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
<!--<link rel="stylesheet" href="/dist/css/swiper.min.css">
<link rel="stylesheet" href="/dist/css/animate.min.css">
<script src="/dist/js/swiper.min.js"></script>
<script src="/dist/js/swiper.animate.min.js"></script>-->

<link rel="stylesheet" href="css/swiper.min.css">
<link rel="stylesheet" href="css/animate.min.css">
<script src="js/swiper.min.js"></script>
<script src="js/swiper.animate.min.js"></script>

<style>
*{
	margin:0;
	padding:0;
}
html,body{
	height:100%;
}
body{
	font-family:"microsoft yahei";
}
.swiper-container {
  /*  width: 320px;
    height: 480px;*/
	width: 100%;
    height: 100%;
	background:#fff;
}  
.swiper-slide{
}
.swiper-slide{
	width:100%;
	height:100%;
	background:url(img/bg.jpg) no-repeat left top;
	background-size:100% 100%;
}
img{
	display:block;
}
.swiper-pagination-bullet {
width: 6px;
height: 6px;
background: #fff;
opacity: .4;
}
.swiper-pagination-bullet-active {
opacity: 1;
}
@-webkit-keyframes tipmove{0%{bottom:10px;opacity:0}50%{bottom:15px;opacity:1}100%{bottom:20px;opacity:0}}
.ani{
	position:absolute;
	}
.txt{
	position:absolute;
}
#array{
	position:absolute;z-index:999;-webkit-animation: tipmove 1.5s infinite ease-in-out;
}
</style>
</head>

<body>
<div class="swiper-container swiper-container-vertical">
    <div class="swiper-wrapper">
    <!-------------slide1----------------->
        <section class="swiper-slide swiper-slide-active" style="height: 480px;">

        <img src="img/s1-t2.png" class="ani resize  fadeIn animated" style="width: 100px; height: 110px; left: 70px; top: 185px; z-index: 3; visibility: visible;animation-duration:0.5s;-webkit-animation-duration:0.5s;animation-delay:1.5s;-webkit-animation-delay:1.5s;" swiper-animate-effect="fadeIn" swiper-animate-duration="0.5s" swiper-animate-delay="1.5s" swiper-animate-style-cache="width:100px;height:110px;left:70px;top:185px;z-index:3;">
        <img src="img/s1-t1.png" class="ani resize  bounceIn animated" style="width: 60px; height: 110px; left: 220px; top: 185px; z-index: 3; visibility: visible;animation-duration:0.5s;-webkit-animation-duration:0.5s;animation-delay:1s;-webkit-animation-delay:1s;" swiper-animate-effect="bounceIn" swiper-animate-duration="0.5s" swiper-animate-delay="1s" swiper-animate-style-cache="width:60px;height:110px;left:220px;top:185px;z-index:3;">
        <img src="img/flower.png" class="ani resize  fadeInLeft animated" style="width: 180px; height: 220px; left: 0px; top: 0px; z-index: 2; visibility: visible;animation-duration:0.5s;-webkit-animation-duration:0.5s;animation-delay:0s;-webkit-animation-delay:0s;" swiper-animate-effect="fadeInLeft" swiper-animate-duration="0.5s" swiper-animate-delay="0s" swiper-animate-style-cache="width:180px;height:220px;left:0;top:0;z-index:2;">
        <img src="img/s1.png" class="ani resize  fadeIn animated" style="width: 320px; height: 200px; left: 0px; top: 140px; z-index: 1; visibility: visible;animation-duration:0.5s;-webkit-animation-duration:0.5s;animation-delay:0.5s;-webkit-animation-delay:0.5s;" swiper-animate-effect="fadeIn" swiper-animate-duration="0.5s" swiper-animate-delay="0.5s" swiper-animate-style-cache="width:320px;height:200px;left:0px;top:140px;z-index:1;">
        
        </section>
     <!---------------slide2-------------->   
        <section class="swiper-slide swiper-slide-next" style="height: 480px;">
        <img src="img/s2-i5.png" class="ani resize" style="width: 263px; height: 177px; left: 31px; top: 262px; z-index: 5; border-radius: 20px; visibility: hidden;" swiper-animate-effect="fadeInLeft" swiper-animate-duration="0.5s" swiper-animate-delay="2s" swiper-animate-style-cache="width:263px;height:177px;left:31px;top:262px;z-index:5; border-radius:20px;">
      <img src="img/s2-i4.png" class="ani resize" style="width: 195px; height: 163px; left: 31px; top: 48px; z-index: 4; visibility: hidden;" swiper-animate-effect="fadeInRight" swiper-animate-duration="0.5s" swiper-animate-delay="1.3s" swiper-animate-style-cache="width:195px;height:163px;left:31px;top:48px;z-index:4;">
        <img src="img/s2-i3.png" class="ani resize" style="width: 212px; height: 186px; left: 24px; top: 36px; z-index: 3; visibility: hidden;" swiper-animate-effect="fadeInLeft" swiper-animate-duration="0.5s" swiper-animate-delay="1s" swiper-animate-style-cache="width:212px;height:186px;left:24px;top:36px;z-index:3;">
        <img src="img/s2-i2.png" class="ani resize" style="width: 64px; height: 221px; left: 237px; top: 20px; z-index: 2; visibility: hidden;" swiper-animate-effect="fadeInUp" swiper-animate-duration="0.5s" swiper-animate-delay="0.3s" swiper-animate-style-cache="width:64px;height:221px;left:237px;top:20px;z-index:2;">
        <img src="img/s2-i1.png" class="ani resize" style="width: 42px; height: 192px; left: 248px; top: 27px; z-index: 1; visibility: hidden;" swiper-animate-effect="fadeInDown" swiper-animate-duration="0.5s" swiper-animate-delay="0s" swiper-animate-style-cache="width:42px;height:192px;left:248px;top:27px;z-index:1;">
        
        </section>
     <!----------------slide3-------------->
        <section class="swiper-slide" style="height: 480px;">
        
        <img src="img/s3-i5.png" class="ani resize" style="width: 263px; height: 177px; left: 31px; top: 262px; z-index: 5; border-radius: 20px; visibility: hidden;" swiper-animate-effect="fadeInLeft" swiper-animate-duration="0.5s" swiper-animate-delay="2s" swiper-animate-style-cache="width:263px;height:177px;left:31px;top:262px;z-index:5; border-radius:20px;">
      <img src="img/s3-i4.png" class="ani resize" style="width: 195px; height: 163px; left: 31px; top: 48px; z-index: 4; visibility: hidden;" swiper-animate-effect="fadeInRight" swiper-animate-duration="0.5s" swiper-animate-delay="1.3s" swiper-animate-style-cache="width:195px;height:163px;left:31px;top:48px;z-index:4;">
        <img src="img/s2-i3.png" class="ani resize" style="width: 212px; height: 186px; left: 24px; top: 36px; z-index: 3; visibility: hidden;" swiper-animate-effect="fadeInLeft" swiper-animate-duration="0.5s" swiper-animate-delay="1s" swiper-animate-style-cache="width:212px;height:186px;left:24px;top:36px;z-index:3;">
        <img src="img/s3-i2.png" class="ani resize" style="width: 64px; height: 221px; left: 237px; top: 20px; z-index: 2; visibility: hidden;" swiper-animate-effect="fadeInUp" swiper-animate-duration="0.5s" swiper-animate-delay="0.3s" swiper-animate-style-cache="width:64px;height:221px;left:237px;top:20px;z-index:2;">
        <img src="img/s2-i1.png" class="ani resize" style="width: 42px; height: 192px; left: 248px; top: 27px; z-index: 1; visibility: hidden;" swiper-animate-effect="fadeInDown" swiper-animate-duration="0.5s" swiper-animate-delay="0s" swiper-animate-style-cache="width:42px;height:192px;left:248px;top:27px;z-index:1;">
        
        </section>
        <!-------------slide4----------------->
        <section class="swiper-slide" style="height: 480px;">

        <div class="ani resize" style="width: 120px; height: 110px; left: 110px; top: 184px; z-index: 3; visibility: hidden;" swiper-animate-effect="fadeInLeft" swiper-animate-duration="0.5s" swiper-animate-delay="1s" swiper-animate-style-cache="width:120px;height:110px;left:110px;top:184px;z-index:3;">
        <div class="txt" style="transform: translateX(0px) translateY(0px) scaleX(1) scaleY(1);">
        <p style="width:15px;color:#b60927; display:inline-block; font-size:90%; line-height:1; margin-right:10px;">愿您羊年运旺福旺</p>
        <p style="width:15px;color:#b60927; display:inline-block; font-size:90%; line-height:1; margin-right:10px;">条条祝福给您送上</p>
        <p style="width:15px;color:#b60927; display:inline-block; font-size:90%; line-height:1; margin-right:10px;">美丽花灯传递吉祥</p>
        <p style="width:15px;color:#b60927; display:inline-block; font-size:90%; line-height:1; margin-right:10px;">圆圆汤圆味道芬芳</p></div>
        
        </div>
        <div class="ani resize" style="width: 60px; height: 110px; left: 260px; top: 185px; z-index: 3; color: rgb(182, 9, 39); font-size: 160%; font-weight: bold; visibility: hidden;" swiper-animate-effect="fadeInRight" swiper-animate-duration="1s" swiper-animate-delay="1s" swiper-animate-style-cache="width:60px;height:110px;left:260px;top:185px;z-index:3;color:#b60927; font-size:160%; font-weight:bold;"> 
        <div class="txt" style="transform: translateX(0px) translateY(0px) scaleX(1) scaleY(1);">
        元<br>宵<br>节</div>
        </div>
        <img src="img/flower.png" class="ani resize" style="width: 180px; height: 220px; left: 0px; top: 0px; z-index: 2; visibility: hidden;" swiper-animate-effect="fadeInLeft" swiper-animate-duration="0.5s" swiper-animate-delay="0s" swiper-animate-style-cache="width:180px;height:220px;left:0;top:0;z-index:2;">
        <img src="img/s1.png" class="ani resize" style="width: 320px; height: 200px; left: 0px; top: 140px; z-index: 1; visibility: hidden;" swiper-animate-effect="fadeIn" swiper-animate-duration="0.5s" swiper-animate-delay="0.5s" swiper-animate-style-cache="width:320px;height:200px;left:0px;top:140px;z-index:1;">
        
        </section>
        
        
        
    </div>
    
   <img src="img/web-swipe-tip.png" style="width:20px;height:15px; top:460px; left:150px;" id="array" class="resize">
  <div class="swiper-pagination swiper-pagination-bullets"><span class="swiper-pagination-bullet swiper-pagination-bullet-active"></span><span class="swiper-pagination-bullet"></span><span class="swiper-pagination-bullet"></span><span class="swiper-pagination-bullet"></span></div>  
</div>


<script>  

scaleW=window.innerWidth/320;
scaleH=window.innerHeight/480;
var resizes = document.querySelectorAll('.resize');
          for (var j=0; j<resizes.length; j++) {
           resizes[j].style.width=parseInt(resizes[j].style.width)*scaleW+'px';
		   resizes[j].style.height=parseInt(resizes[j].style.height)*scaleH+'px';
		   resizes[j].style.top=parseInt(resizes[j].style.top)*scaleH+'px';
		   resizes[j].style.left=parseInt(resizes[j].style.left)*scaleW+'px'; 
	
          }
var scales = document.querySelectorAll('.txt');
for (var i=0; i<scales.length; i++) {
	ss=scales[i].style;
	ss.webkitTransform = ss.MsTransform = ss.msTransform = ss.MozTransform = ss.OTransform =ss.transform='translateX('+scales[i].offsetWidth*(scaleW-1)/2+'px) translateY('+scales[i].offsetHeight*(scaleH-1)/2+'px)scaleX('+scaleW+') scaleY('+scaleH+') ';
}

		  
  var mySwiper = new Swiper ('.swiper-container', {
    direction : 'vertical',
    pagination: {
	   el:'.swiper-pagination',
    },
    mousewheel: true,
    on:{
	  init: function(){
        swiperAnimateCache(this);
        swiperAnimate(this);
 	  },
      slideChangeTransitionEnd: function(){
  	    swiperAnimate(this);
      }
    }
  })         
  </script>


</body></html>